﻿<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>			
		$(document).ready(function(){					
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);
			//显示工具栏
			showJTopoToobar(stage);

			var scene = new JTopo.Scene();	
			scene.background = './img/bg.jpg';
			
			$('#dragButton').click(function(){
				//拖拽模式				
				scene.mode = 'drag';
			});
			$('#selectButton').click(function(){
				//正常模式(可以选择节点）
				scene.mode = 'select';
			});
			$('#normalButton').click(function(){
				//默认模式
				scene.mode = 'normal';
			});
					
			var defaultNode = new JTopo.Node('微软雅黑');
			//defaultNode.fontColor = '0,0,0';
			defaultNode.font = '14px 微软雅黑';		
			defaultNode.textOffsetY = 10;
			defaultNode.setLocation(200, 100);
			scene.add(defaultNode);

			var hostNode = new JTopo.Node('新宋体');
			hostNode.fontColor = '255,255,0';
			hostNode.font = '新宋体';
			hostNode.textOffsetY = 10;
			hostNode.setImage('./img/host.png', true);
			hostNode.setLocation(300, 100);
			hostNode.scala = 1.5;
			scene.add(hostNode);

			var textNode = new JTopo.TextNode('This is a Text node.');
			textNode.font = 'italic bold 16px 微软雅黑';
			textNode.setLocation(317, 310);
			scene.add(textNode);
			
			var peopleNode = new JTopo.Node('people');
			peopleNode.setLocation(500, 200);
			peopleNode.setSize(64, 64);
			peopleNode.setImage('./img/person.png');
			scene.add(peopleNode);

			var circleNode = new JTopo.CircleNode('node')			
			circleNode.fillStyle = '0, 0, 255';
			circleNode.setLocation(390, 90);
			circleNode.textPosition = 'Middle_Center';
			scene.add(circleNode);


			var node = new JTopo.Node("自定义");				
			node.percent = 0.8;
			node.beginDegree = 0;
			node.width = node.height = 60;
			node.setLocation(200, 200);
			node.paint = function(g){
				g.beginPath();
				g.moveTo(0,0);
				g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';
				g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);
				g.fill();				
				g.closePath();
				
				g.save();				
				g.beginPath();
				g.fillStyle = 'rgba(255,255,0,' + this.alpha + ')';
				g.moveTo(0,0);
				g.arc(0, 0, this.width/2-10, this.beginDegree, this.beginDegree + 2*Math.PI);				
				g.fill();
				g.closePath();								
				g.restore();
								
				this.paintText(g);
			};			
			scene.add(node);
			
			stage.add(scene);
			
			//居中显示
			scene.centerAndZoom();
		});
	</script>
  </head>

  <body>

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">		
				<p>
					<center>
						<input type="button" id='normalButton' value="默认模式" /> 
						<input type="button" id='selectButton' value="框选模式"/>
						<input type="button" id='dragButton' value="平移模式" /> 
					</center>
				</p><p>&nbsp;</p>
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>				
					
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>
  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
	</body>
</html>